<template>
	<view>
		<view class="header" id='header'>
			<view class="btn-search">
				<u-search v-model="page.keyword" placeholder="会员名称/会员ID" @custom="search()" @search="search()">
				</u-search>
			</view>
		</view>
		<scroll-view scroll-y :style="[{height: height + 'px'}]" lower-threshold="200" v-if="list.length > 0"
			@scrolltolower="reachBottom">
			<view class="padding-20">
				<view class="card" v-for="item in list" :key="item.id">
					<view class="info">
						<view class="avatar">
							<u-avatar size="40" :src="item.headImgUrl"></u-avatar>
						</view>
						<view class="name-id">
							<view class="font-9-30">{{item.nickName}}</view>
							<view class="id">ID: {{item.memberId}}</view>
						</view>
					</view>
					<view class="right-box">
						<view class="r-b-l" @click="showDetail(item)">
							详情
						</view>
						<view class="r-b-r" @click="showRemoveHint(item)">
							移出
						</view>
					</view>
				</view>
				<u-loadmore :status="status" :load-text="loadText" />
			</view>
		</scroll-view>
		<view v-else>
			<u-empty marginTop="30" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
		</view>

		<u-popup :show="show" round="20rpx" :safeAreaInsetBottom="false" closeable="true" @close="close" mode="center">
			<view class="popup-box">
				<view class="p-b-info">
					<view>
						<u-avatar size="40" :src="member.headImgUrl"></u-avatar>
					</view>
					<view class="margin-20">
						<view class="font-9-30">{{member.nickName}}</view>
						<view class="p-b-i-id">ID{{member.memberId}}</view>
					</view>
				</view>
				<view class="popup-state-box">
					<view class="popup-state">
						<view class="p-s-top">累计消费</view>
						<view class="p-s-bottom">{{member.totalPay.toFixed(2)}}元</view>
					</view>
					<view class="popup-state">
						<view class="p-s-top">累计投币</view>
						<view class="p-s-bottom">{{member.coin}}个</view>
					</view>
					<view class="popup-state">
						<view class="p-s-top">余币</view>
						<view class="p-s-bottom">{{member.surplusCoin}}个</view>
					</view>
				</view>
				<view class="margin-top-30">
					<view class="popup-cause">
						原因：
					</view>
					<view class="popup-cause-detail">
						{{member.why}}
					</view>
				</view>
				<view class="button-box">
					<view class="button" @click="showRemoveHint(member)">
						移出黑名单
					</view>
				</view>
			</view>
		</u-popup>

		<u-modal :show="isRemoveHint" :title="'提示'" :content="'确定要把当前会员移出黑名单吗?'" show-cancel-button
			@confirm="removeBlackList" @cancel="removeBlackCancel"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				height: 0,
				page: {
					keyword: '',
					pageNum: 1,
				},
				status: 'loadmore',
				loadText: {
					loadmore: '轻轻上拉加载',
					loading: '稍等一会,正在努力为您加载...',
					nomore: '没有更多了'
				},
				list: [],
				member: {
					headImgUrl: '',
					nickName: '',
					memberId: '',
					totalPay: 0,
					coin: 0,
					surplusCoin: 0
				},
				isRemoveHint: false,
			}
		},
		onLoad() {
			this.search();
		},
		onPullDownRefresh() {
			this.search();
		},
		onReady() {
			this.getPomHeight();
		},
		methods: {
			showRemoveHint(data) {
				this.member = data;
				this.isRemoveHint = true;
			},
			hideRemoveHint() {
				this.isRemoveHint = false;
			},
			removeBlackCancel(){
				this.isRemoveHint = false;
			},

			removeBlackList() {
				uni.showLoading({
					title: '请稍等...',
					mask: true
				})
				if (this.member.memberId > 0) {
					this.$api('blackList.del', {
						memberId: this.member.memberId
					}).then(res => {
						this.hideRemoveHint();
						uni.hideLoading();
						if (res.status == 1) {
							this.$helpers.toast(res.msg);
						} else {
							this.search();
							this.close();
							this.$helpers.toast("已成功把会员(" + this.member.nickName + ")移出黑名单!");
						}
					})
				} else {
					this.$helpers.toast("异常信息,请重新访问页面!");
				}
			},
			findMemberIdSumCoin() {
				let param = {
					memberId: this.member.memberId
				}
				this.$api('consumeRecord.findMemberIdSumCoin', param).then(res => {
					if (res.data != null) {
						this.member.coin = res.data;
						this.show = true;
					}
				})
			},
			close() {
				this.show = false;
			},

			getPomHeight() {
				let query = wx.createSelectorQuery().in(this)
				query.select('#header').boundingClientRect()
				query.exec(res => {
					let windowHeight = wx.getSystemInfoSync().windowHeight
					this.height = windowHeight
					for (var i = 0; i < res.length; i++) {
						this.height -= res[i].height;
					}
				})
			},
			navTab() {
				uni.switchTab({
          url: '/pages/home/home',
				})
			},
			nav(url) {
				this.hideMenu();
				uni.navigateTo({
					url: url
				})
			},
			search() {
				uni.showLoading({
					title: '请稍等...',
					mask: true
				})
				this.list = [];
				this.page.pageNum = 1;
				this.status = 'loadmore';
				this.findData();
			},
			findData() {
				this.$api('blackList.findListPages', this.page).then(res => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					if (res.data != null) {
						// 赋值数据,基本都一样
						this.list.push(...res.data.list)
						this.page.pageNum = res.data.pageNum;
						if (this.page.pageNum >= res.data.pages) {
							this.status = 'nomore';
							return;
						}
					}
				})
			},
			reachBottom() {
				if (this.status == 'nomore') {
					return;
				}
				this.status = 'loading';
				// 使用延迟实现加载动画效果
				setTimeout(() => {
					this.page.pageNum = ++this.page.pageNum;
					this.findData();
					this.status = 'loadmore';
				}, 2000)
			},
			showDetail(data) {
				this.member = data;
				this.member.id = data.memberId;
				this.findMemberIdSumCoin();
			},
			/* H5复制 */
			copy(id) {
				id = id + "";
				let textarea = document.createElement("textarea");
				textarea.value = id;
				console.log(textarea.value);
				textarea.readOnly = "readOnly";
				document.body.appendChild(textarea);
				textarea.select();
				textarea.setSelectionRange(0, id.length);
				let result = document.execCommand("copy");
				if (result) {
					this.$helpers.toast("复制成功,ID: " + id);
				} else {
					this.$helpers.toast("复制失败,请重试!");
				}
				textarea.remove();
			},
			remove(data) {
				this.member = data;
				this.member.id = data.memberId;
				this.$refs.rMemberInfo.showRemoveHint(this.member);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: rgb(247, 248, 247);
	}

	.header {
		background-color: white;
		padding: 30rpx;

		.btn-search {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.search-btn {
				font-size: $uni-font-size-sm;
				width: 100rpx;
				margin-left: $u-margin-medium;
			}
		}
	}


	.card {
		background-color: white;
		padding: 20rpx;
		border-radius: 15rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.info {
			display: flex;
			justify-content: flex-start;

			.name-id {
				margin-left: 20rpx;

				.id {
					margin-top: 20rpx;
					color: rgba(0, 0, 0, 0.5);
					font-size: 23rpx;
				}
			}
		}

		.detail {
			margin-right: 30rpx;
		}
	}

	.font-9-30 {
		font-size: 30rpx;
		color: rgba(0, 0, 0, 0.9)
	}

	.right-box {
		display: flex;
		align-items: center;
	}

	.r-b-l {
		background: rgb(240, 240, 240);
		border-radius: 6rpx;
		font-size: 23rpx;
		color: rgba(0, 0, 0, 0.9);
		padding: 5rpx 20rpx;
	}

	.r-b-r {
		background: rgb(254, 64, 76);
		margin-left: 30rpx;
		border-radius: 6rpx;
		font-size: 23rpx;
		color: #FFFFFF;
		padding: 5rpx 20rpx;
	}

	.padding-20 {
		padding: 20rpx;
	}

	.popup-state-box {
		display: flex;
		margin-top: 40rpx;
		border-radius: 6rpx 6rpx 0px 0px;
		border: 1rpx solid rgb(239, 239, 239);
		justify-content: space-around;
	}

	.popup-state {
		flex: auto;
		text-align: center;
	}

	.p-s-top {
		background: rgb(255, 235, 237);
		border-top-left-radius: 6rpx;
		font-size: $f-base;
		color: rgba(0, 0, 0, 0.8);
		padding: 20rpx 0;
	}

	.p-s-bottom {
		color: rgb(254, 64, 76);
		font-size: $f-base;
		padding: 20rpx 0;
	}

	.popup-box {
		width: 500rpx;
		padding: 40rpx;
	}

	.p-b-info {
		display: flex;
		margin-top: 30rpx;
	}

	.p-b-i-id {
		margin-top: 10rpx;
		font-size: 23rpx;
		color: rgba(0, 0, 0, 0.5)
	}

	.margin-20 {
		margin-left: 20rpx;
	}

	.popup-cause {
		color: rgba(0, 0, 0, 0.9);
		font-size: $f-base;
	}

	.popup-cause-detail {
		color: rgba(0, 0, 0, 0.6);
		margin-top: 5rpx;
		font-size: 24rpx;
	}

	.button {
		background: rgb(96,114,255);
		font-size: $f-base;
		text-align: center;
		padding: 20rpx 0pt;
		color: rgb(255, 255, 255);
		border-radius: 120rpx;
	}

	.button-box {
		margin-top: 60rpx;
		padding: 0 40rpx;
	}

	.margin-top-30 {
		margin-top: 30rpx;
	}
</style>
